<template>
	<view class="productBox">
		<u-image :lazy-load="true" :src="$u.file.getMedieUrl(goodsInfo.image)" @click="confirm(item.id)" style="height: 160rpx; width: 160rpx"></u-image>
		<view class="middle-box">
			<uni-tooltip :content="goodsInfo.name">
				<view class="productBox-tittle">
					{{ goodsInfo.name }}
				</view>
			</uni-tooltip>
			<uni-tooltip :content="goodsInfo.intro">
				<view class="productBox-intro">
					{{ goodsInfo.intro }}
				</view>
			</uni-tooltip>
			<view class="productBox-price">${{ goodsInfo.price }}</view>
			<view class="time-box" v-if="showTime">
				{{ goodsInfo.time }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'goodsInfo',
	props: {
		//数据
		goodsInfo: {
			type: Object,
			default: {}
		},
		//是否显示时间
		showTime: {
			type: Boolean,
			default: true
		},
		
	},
	data() {
		return {
			appBaseUrl: process.uniEnv.COSHost
		};
	},
	methods: {
		confirm(id) {
			this.$emit('getGoodsInfo', id);
		}
	}
};
</script>

<style lang="scss" scoped>
	.productBox {
		background: #ffffff;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		opacity: 1;
		border-bottom: 1px solid #f2f3f5;
		margin: 20rpx;
		padding: 20rpx;
		display: flex;
		// padding-bottom: 10px;
			// justify-content: space-between;
		
			
				.middle-box {
					width: 530rpx;
					padding-left: 20rpx;
					.productBox-tittle {
						font-size: 30rpx;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.productBox-intro {
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin: 20rpx 0 30rpx 0;
					}
					.productBox-price {
						font-size: 30rpx;
						color: #000000;
						font-weight: 500;
					}
					.time-box{
						font-weight: 400;
						color: #A8A8A8;
						font-size: 24rpx;
						text-align: end;
					}
				}
				
			}
</style>
